import React, { useEffect, useState } from 'react';
import { Card, Empty, Space, Spin, Tag } from 'antd';
import { useParams } from 'react-router-dom';

import PageBreadcrumb from 'components/PageBreadcrumb';
import TechGraph from 'components/TechGraph';
import { GraphDetail } from 'types/graph-builder';
import { graphBuilderApi } from 'services';

import styles from './GraphView.module.css';

const GraphView: React.FC = () => {
  const { id } = useParams();
  const [loading, setLoading] = useState(true);
  const [graphDetail, setGraphDetail] = useState<GraphDetail | null>(null);

  const fetchReportDetail = async () => {
    if (!id) return;

    setLoading(true);
    try {
      const res = await graphBuilderApi.getGraphDetail(id);
      if (res.code === 200) {
        setGraphDetail(res.data);
      }
    } catch (error) {
      console.error('获取报告详情失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 获取报告详情
  useEffect(() => {
    fetchReportDetail();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  // useEffect(() => {
  //   const chartDom = document.getElementById('graphChart');
  //   if (!chartDom) return;

  //   const myChart = echarts.init(chartDom);

  //   const option = {
  //     title: {
  //       text: '产业链知识图谱',
  //     },
  //     tooltip: {},
  //     animationDurationUpdate: 1500,
  //     animationEasingUpdate: 'quinticInOut',
  //     series: [
  //       {
  //         type: 'graph',
  //         layout: 'force',
  //         data: [
  //           {
  //             name: '新能源汽车',
  //             symbolSize: 70,
  //             draggable: true,
  //             itemStyle: { color: '#FF6B6B' },
  //           },
  //           {
  //             name: '动力电池',
  //             symbolSize: 50,
  //             draggable: true,
  //             itemStyle: { color: '#4ECDC4' },
  //           },
  //           {
  //             name: '充电设施',
  //             symbolSize: 50,
  //             draggable: true,
  //             itemStyle: { color: '#4ECDC4' },
  //           },
  //           {
  //             name: '电机系统',
  //             symbolSize: 45,
  //             draggable: true,
  //             itemStyle: { color: '#4ECDC4' },
  //           },
  //           {
  //             name: '智能网联',
  //             symbolSize: 40,
  //             draggable: true,
  //             itemStyle: { color: '#45B7D1' },
  //           },
  //         ],
  //         links: [
  //           { source: '新能源汽车', target: '动力电池' },
  //           { source: '新能源汽车', target: '充电设施' },
  //           { source: '新能源汽车', target: '电机系统' },
  //           { source: '新能源汽车', target: '智能网联' },
  //           { source: '动力电池', target: '充电设施' },
  //         ],
  //         roam: true,
  //         label: {
  //           show: true,
  //           position: 'right',
  //           formatter: '{b}',
  //         },
  //         force: {
  //           repulsion: 200,
  //           edgeLength: [80, 120],
  //         },
  //         emphasis: {
  //           focus: 'adjacency',
  //           lineStyle: {
  //             width: 4,
  //           },
  //         },
  //       },
  //     ],
  //   };

  //   myChart.setOption(option);

  //   return () => {
  //     myChart.dispose();
  //   };
  // }, [id]);

  const categories = Array.from(
    new Set(graphDetail?.links.nodes?.map((node) => node.category) || [])
  );

  return (
    <div className={styles.container}>
      <PageBreadcrumb
        breadcrumbs={[
          { title: '< 返回', path: '/graph-builder' },
          { title: '图谱详情' },
        ]}
      />

      <Spin spinning={loading}>
        <Card className={styles.infoCard}>
          <Space direction="vertical" size="middle">
            <Space>
              <Tag color="blue">图谱ID: {id}</Tag>
              <Tag color="green">
                构建方式:{' '}
                {graphDetail?.graph_type === 'structured'
                  ? '结构化'
                  : '非结构化'}
              </Tag>
              <Tag color="purple">节点数量: {graphDetail?.node_number}</Tag>
              <Tag color="orange">关系数量: {graphDetail?.relation}</Tag>
            </Space>
            <div>
              图谱描述：展示新能源汽车产业链的核心企业、上下游关系及关键技术分布。
            </div>
          </Space>
        </Card>

        <Card title="产业链知识图谱" className={styles.graphCard}>
          {graphDetail?.links.nodes && graphDetail?.links.nodes.length > 0 ? (
            <TechGraph
              title="产业链知识图谱"
              nodes={graphDetail?.links.nodes || []}
              relationships={graphDetail?.links.relationships || []}
              categories={categories}
            />
          ) : (
            <Empty
              description="暂无数据"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              style={{ marginTop: 100 }}
            />
          )}
        </Card>
      </Spin>
    </div>
  );
};

export default GraphView;
